<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="height: 32px">
        <el-row align="middle" type="flex">
          <el-col :span="14">
            <span>{{ title }}</span>
          </el-col>
          <el-col :span="10" style="text-align: right ;" v-if="grade.id">
            <el-button type="primary">统计</el-button>
            <el-button type="primary" @click="activation">激活</el-button>
            <el-button type="danger" @click="deleteVer">删除</el-button>
            <el-select v-model="selectVer" placeholder="请选择" @change="selectItem">
              <el-option v-for="item in selectArray"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div>
        <div style="margin-bottom: 4px" v-for="(clazz, index) in eval_ver['showClazz']" :key="index">
          <el-tag style="margin-bottom: 4px; margin-right: 4px " type="primary">{{ index }}</el-tag>
          <el-tag style="margin-bottom: 4px; margin-right: 4px " type="info" v-for="item in clazz" :key="item">
            {{ item }}
          </el-tag>
        </div>
        <el-button type="primary" v-if="grade.id" style=" margin-bottom: 10px" @click="createItem">新建目录</el-button>
        <el-table
          :height="tableHeight"
          :max-height="tableHeight"
          :data="tableData"
          border
          row-key="id"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          style="width: 100% ">
          <el-table-column
            prop="name"
            label="评估项目">
          </el-table-column>
          <el-table-column
            align="center"
            prop="seq"
            label="排序">
          </el-table-column>
          <el-table-column
            align="center"
            prop="score"
            label="分值">
          </el-table-column>
          <el-table-column
            align="center"
            prop="submitTimes"
            label="提交限制">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" @click="updateItem(row)">编辑</el-button>
              <el-button type="text" @click="deleteItem(row)">删除</el-button>
              <el-button type="text" v-if="row.pid">统计</el-button>
              <el-button type="text" v-else @click="childrenItem(row)">添加子项</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import {ListByEvalItem, SelectList, Activation, DeleteEval, DeleteItem} from '@/api/bt/student-eval/evalItem'

export default {
  name: "SessionEval",
  data() {
    let grade = {}
    let eval_ver = {}
    return {
      grade,
      eval_ver,
      title: "评估表",
      //表格高度根据窗口
      tableHeight: undefined,
      screenHeight: window.innerHeight,
      // 表格数据
      tableData: [],
      //select框选默认值
      selectVer: undefined,
      selectArray: [],
      clazzShow: undefined,
    }
  },
  mounted() {
    this.tableHeight = window.innerHeight - 220;
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight
        this.screenHeight = window.screenHeight;
      })()
    }
  },
  watch: {
    screenHeight(val) {
      this.screenHeight = val
      if (this.grade.id) {
        if (this.eval_ver['showClazz']) {
          this.tableHeight = window.innerHeight - 505
        } else {
          this.tableHeight = window.innerHeight - 275
        }
      } else {
        this.tableHeight = this.screenHeight - 220
      }
    },
  },
  methods: {
    //表格高度
    height() {
      if (this.grade.id) {
        if (this.eval_ver['showClazz']) {
          this.tableHeight = window.innerHeight - 505
        } else {
          this.tableHeight = window.innerHeight - 275
        }
      }
    },
    //通过id获取表格信息数据
    getTableById(id) {
      ListByEvalItem(id).then((res) => {
        this.eval_ver = res.data
        this.tableData = res.data.items
        this.selectVer = res.data.name
        this.clazzShow = res.data.clazzShow
        this.title = res.data['gradeName'] + "评估表/" + res.data.name
        this.height()
      })
    },
    //初始化页面
    init(grade, flag) {
      this.grade = grade
      this.getVerList()
      //当前激活版本
      if (flag) {
        this.getTableById(grade["verId"])
        //年级最新版本
      } else {
        this.getTableById(grade["lastVerId"])
      }

    },
    //获取 下拉框
    getVerList() {
      SelectList(this.grade["id"]).then((res) => {
        this.selectArray = res.data;
      })
    },
    //下拉框值 改变
    selectItem(id) {
      if (id) {
        this.getTableById(id)
      }
    },
    //激活
    activation() {
      this.$confirm('此操作将激活此评估表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //往后端发送 年级id 原来eval_ver f_id 激活的eval_ver f_id
        let obj = {
          evalId: this.grade.id,
          oldVerId: this.grade['verId'],
          newVerId: this.eval_ver.id,
        }
        Activation(obj).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500,
          })
          this.$emit("refresh", true, this.eval_ver)
        })
      })
    },
    //删除版本
    deleteVer() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = this.eval_ver.id
        DeleteEval(id).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500,
          })
          this.init(this.grade, true)
          this.$emit("refresh", false, null)
        })
      })
    },
    //刷新方法
    freshEval(id) {
      this.getVerList()
      if (id) {
        this.getTableById(id)
      } else {
        this.getTableById(this.grade["verId"])
      }
    },
    //创建父目录
    createItem() {
      this.$emit("item-create", this.eval_ver.id)
    },
    //修改
    updateItem(row) {
      this.$emit("item-update", row)
    },
    //删除
    deleteItem(row) {
      this.$confirm('此操作将删除该评估项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteItem(row.id).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500,
          })
          this.freshEval(this.eval_ver.id)
        })
      })
    },
    //新建子项
    childrenItem(row) {
      this.$emit("children-create", row, this.eval_ver.id)
    }
  }
}
</script>
<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

::v-deep.el-table--border {
  border-bottom: 1px solid #EBEEF5;
}
</style>
